<template>
  <el-card class="box-card" style="width: 100%">
    <div slot="header" class="clearfix" style="width: 100%">
      <span>标注样式</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="restoreDefault">恢复默认</el-button>
      <el-button type="primary" style="float: right; padding: 3px 10px" @click="changeStyle">提交</el-button>
    </div>
    <div>
      <div>
        颜   色 ：
        <el-color-picker
                v-model="cstyleobject.ctextcolor"
                :predefine="predefinecolors" size="small">
        </el-color-picker>
      </div>

      <div>
        字   体 ：
        <el-select style="width: 200px" v-model="cstyleobject.cfontvalue" placeholder="黑体">
          <el-option
                  v-for="item in cfontoptions"
                  :key="item.cfontvalue"
                  :label="item.cfontlabel"
                  :value="item.cfontvalue">
          </el-option>
        </el-select>
      </div>

      <div>
        大   小 ：
        <el-input-number style="width: 200px" v-model="cstyleobject.ctextsize" :min="0" :step="1"></el-input-number>
      </div>

      <div>
        X偏移：
        <el-input-number style="width: 200px" v-model="cstyleobject.cxoffset" :step="1"></el-input-number>
      </div>

      <div>
        Y偏移：
        <el-input-number style="width: 200px" v-model="cstyleobject.cyoffset" :step="1"></el-input-number>
      </div>

      <div>
        旋    转 ：
        <el-input-number style="width: 200px" v-model="cstyleobject.csymbolrotation" :min="-360" :step="1" :max="360"></el-input-number>
      </div>

      <div>
        最小显示比例：
        <el-input style="width: 200px" v-model="cstyleobject.cminscale">
          <template slot="prepend">1:</template>
        </el-input>
      </div>

      <div>
        最大显示比例：
        <el-input style="width: 200px" v-model="cstyleobject.cmaxscale">
          <template slot="prepend">1:</template>
        </el-input>
      </div>


    </div>
  </el-card>
</template>

<script>
    export default {
        name: "textstyler",
        props:{
          cstyleobject:Object,
        },
      data(){
        return{
          predefinecolors: [
            '#ff4500',
            '#ff8c00',
            '#ffd700',
            '#90ee90',
            '#00ced1',
            '#1e90ff',
            '#c71585'
          ],
          cfontoptions: [{
            cfontvalue: '黑体',
            cfontlabel: '黑体'
          }, {
            cfontvalue: '宋体',
            cfontlabel: '宋体'
          }, {
            cfontvalue: 'Times New Roman',
            cfontlabel: 'Times New Roman'
          }, {
            cfontvalue: 'Arial',
            cfontlabel: 'Arial'
          }, {
            cfontvalue: 'Sans-serif',
            cfontlabel: 'Sans-serif'
          }],
          cfontvalue: '黑体',

        }
      },
        methods:{
          //样式面板恢复默认
          restoreDefault(){
            this.cstyleobject.ctextcolor = '#000000';
            this.cstyleobject.ctextsize = 12;
            this.cstyleobject.cxoffset = 0;
            this.cstyleobject.cyoffset = 0;
            this.cstyleobject.csymbolrotation = 0;
            this.cstyleobject.cfontvalue = '黑体';
            this.cstyleobject.cminscale = '500000';
            this.cstyleobject.cmaxscale ='0';
          },
          changeStyle(){
            this.$emit('changeTextStyle')
          }


        }
    }
</script>

<style scoped>

</style>
